<template>
  <div class="bigRight">
    <div class="title d-flex">
      <span class="text">认证通过率排名</span>
      <div class="line">
        <dv-decoration-3 class="dv-dec-3" />
      </div>
    </div>
    <dv-decoration-2 class="line2"/>
    <div class="rankingBoardBox">
      <dv-scroll-ranking-board :config="config" class="rankingBoard" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BigRight3',
    props: {
      data: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        config: { }
      }
    },
    watch: {
      data: {
        handler (newData) {
          this.config = {
            data: newData,
            unit: '%'
          }
        },
        immediate: true,
        deep: true
      }
    }
  }
</script>

<style scoped lang="less">
  .bigRight {
    width: 100%;
    height: 100%;
    padding:0 8px;
    box-sizing: border-box;
    overflow: hidden;
    .title { position: relative;
      .text {
        color: #e4ebfb;
        font-size: 20px;
      }
      .line {
        width: 100px; height: 30px; margin-left: 10px;
        .dv-dec-3 {
          position: relative;
          width: 100%;
          height: 100%;
        }
      }
    }
    .line2 {width:100%;height:5px;margin-top: 6px}
    .rankingBoardBox {
      width: 100%; height: 210px; margin-top: 10px
    }
    .rankingBoard { width: 100%; height: 100%; }
    /deep/.rankingBoard .info-name { margin-left: 15px}
    /deep/.rankingBoard .ranking-value { margin-right: 15px}
  }
  /*
  <div class="row-item" style="height: 0px;">
    <div class="ranking-info">
      <div class="rank">No.6</div><div class="info-name">婺城区</div><div class="ranking-value">94%</div>
    </div>
    <div class="ranking-column">
      <div class="inside-column" style="width: 97.8022%;"><div class="shine"></div></div>
    </div>
  </div>
  */
  .d-flex { display: flex;}
</style>
